<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>一键转帐</title>

    <link rel="stylesheet" href="static/css/common.css">

    <link rel="stylesheet" href="static/css/layout.css">

    <link rel="stylesheet" href="static/css/01.css">

    <style>
        .phone_num_text_area {
            width: 100%;
            border: 1px #EDEDEE solid;
            border-radius: .1rem;
            outline: none;
            height: 2rem;
            text-align: left;
            padding: .2rem;
            margin-top: .1rem;
            background-color: #F8F9FB;
            line-height: .5rem;
            font-size: .3rem;
        }

        .check-code-form .img_span,
        .check-code-form img {
            width: .5rem;
            height: .5rem;
            display: inline-block;
            vertical-align: middle;
        }

        .check-code-form img {
            vertical-align: top;
        }
    </style>

    <link rel="stylesheet" href="/static/css/01.css">

</head>

<body class="m-body">


    <div class="m-header inline-block-container">
        <div class="m-header-back inline-block-container">
            <em></em>
            <span>返回</span>
        </div>
        <div class="m-header-title">
            帮助中心
        </div>
        <div class="m-header-right">
            <!-- <div style="padding-right: .3rem" class="buz_blue_yellow">联系客服</div> -->
        </div>
    </div>

    <div class="m-content" style="background-color: white;">

        <div class="m-from">

            <div class="m-line-item zhuan_bi_type_line">
                <div class="m-line-item-content inline-block-container">
                    <div class="fl ">
                        <p class="ft_dot_3">请选择币种</p>
                    </div>
                    <div class="fr  bi_zhong_select_btn">
                        <div class="arrow_right"></div>
                    </div>
                    <div class="fr mr_dot_3">
                        <p class="ft_dot_3">
                            <span class="bizhong_type">USDT</span>
                            <span style="color:#999"> (可用余额
                                <span class="bizhong_balance">1200.36</span>)</span>
                        </p>
                    </div>

                </div>
            </div>

            <div class="m-line-item  zhuan_bi_amount_line">
                <div class="m-line-item-content inline-block-container">
                    <div class="fl ">
                        <p class="ft_dot_3">转币数量</p>
                    </div>

                    <div class="fr">
                        <input type="text" placeholder="请输入转币数量" class="m-input m-line-item-value-input text_align_right">
                    </div>
                </div>
            </div>



        </div>

        <div class="h_dot_3 bg_ef"></div>

        <div class="m-from">

            <div class="m-line-item phone_num_show_line">
                <div class="m-line-item-content inline-block-container">

                    <input type="text" class="m-input-mid" placeholder="请输入对方手机号或邮箱" />

                </div>
            </div>

            <div class="m-line-item phone_num_show_line">
                <div class="m-line-item-content ">
                    <div style="height: .6rem; float:left;line-height: .6rem;margin-top: .3rem;">18627726186</div>
                </div>
            </div>

            <div class="m-line-item  phone_num_area_select_line">
                <div class="m-line-item-content inline-block-container">
                    <div class="fl ">
                        <p class="ft_dot_3">选择地区</p>
                    </div>

                    <div class="fr  phone_num_area_select_btn">
                        <div class="arrow_right"></div>
                    </div>

                    <div class="fr">
                        <span class="phone_num_area ft_dot_3 mr_dot_3">CN+86</span>
                    </div>
                </div>
            </div>

            <div class="m-line-item  h_auto phone_num_input_line">
                <textarea class="phone_num_text_area" placeholder="多个手机号和邮箱请用逗号分开"></textarea>
            </div>

            <div class="m-line-item  line_double">
                <p>总计
                    <span class="buz_font_red"> 5 </span>人次,共支付
                    <span class="buz_font_red"> 10.3000 </span>USDT</p>
                <p>含手续费
                    <span class="buz_font_red"> 0.300 </span>USDT</p>

            </div>






        </div>

        <div class="m-from mt_dot_2_rem" style="margin-bottom: .5rem;">

            <div class="m-slider " style="height:100%; background-color: white;">



                <div class="m-slider-header">

                    <div class="m-slider-header-each active " data-index="0">
                        <div class="m-slider-header-each-text ">手机短息验证</div>
                    </div>
                    <div class="m-slider-header-each" data-index="1">
                        <div class="m-slider-header-each-text">google两次验证</div>
                    </div>

                </div>

                <div class="m-slider-body swiper-container clearfix" style="position:relative;height:calc(100% - .8rem)">
                    <div class="swiper-wrapper">
                        <div class="m-from swiper-slide  check-code-form">

                            <div class="m-line-item">
                                <div class="m-line-item-content ">

                                    <div class="fl ">
                                        <p class="ft_dot_3 fb">验证码</p>
                                    </div>

                                    <div class="fl wp_50">
                                        <input type="text" placeholder="请输入手机验证码" class="m-input m-line-item-value-input text_align_right">
                                    </div>

                                    <div class="fr">
                                        <a class="m-btn m-btn-sm getMsgCode">发送验证码</a>
                                    </div>
                                </div>
                            </div>


                            <div class="m-line-item">
                                <div class="m-line-item-content no_phone_num_bind buz_font_red text_align_center">
                                    <span class="img_span">
                                        <img src="static/img/no_phone_num_bind.png" alt="">
                                    </span>
                                    <span class="va_midle">请先去个人中心进行手机绑定</span>
                                </div>
                            </div>

                            <div class="m-line-item mt_dot_3_rem border_bottom_none">
                                <div class="m-btn-block quick_comfirm">
                                    提交
                                </div>
                            </div>
                        </div>

                        <div class="m-from swiper-slide  check-code-form">

                            <div class="m-line-item">
                                <div class="m-line-item-content ">

                                    <div class="fl ">
                                        <p class="ft_dot_3 fb">验证码</p>
                                    </div>

                                    <div class="fl wp_50">
                                        <input type="text" placeholder="请输入手机验证码" class="m-input m-line-item-value-input text_align_right">
                                    </div>

                                    <div class="fr">
                                        <a class="m-btn m-btn-sm getMsgCode">获取验证码</a>
                                    </div>
                                </div>
                            </div>

                            <div class="m-line-item">
                                <div class="m-line-item-content no_phone_num_bind buz_font_red text_align_center">
                                    <span class="img_span">
                                        <img src="/static/img/no_phone_num_bind.png" alt="">
                                    </span>
                                    <span class="va_midle">请先去个人中心谷歌绑定</span>
                                </div>
                            </div>

                            <div class="m-line-item mt_dot_3_rem  border_bottom_none">
                                <div class="m-btn-block quick_comfirm">
                                    提交
                                </div>
                            </div>


                        </div>
                    </div>
                </div>


            </div>

        </div>

    </div>

    <script src='static/js/jquery-1.8.2.min.js'></script>
    <script src="static/js/common.js "></script>

    <link rel="stylesheet " href="static/plugins/swiper/swiper.min.css " />
    <script src="static/plugins/swiper/swiper.min.js "></script>

    <link rel="stylesheet " href="static/plugins/layer/mobile/need/layer.css ">
    <script src="static/plugins/layer/mobile/layer.js "></script>

    <link rel="stylesheet" href="static/plugins/picker/iosSelect.css">
    <script type="text/javascript" src="static/plugins/picker/iosSelect.js"></script>


    <script type="text/javascript ">
        $(function () {            

             $(".bi_zhong_select_btn").click(function () {
               

            var data = [{ 'id': 1, 'value': 'ETH','bizhong_balance':1244.55 }, { 'id': 2, 'value': 'BCI','bizhong_balance':1244.01  }, { 'id': 3, 'value': 'CAR' ,'bizhong_balance':1244.33 }];

            var val = 2;//打开时的默认值
            // 实例化组件
            var example = new IosSelect(1,               // 第一个参数为级联层级，演示为1
                [data],                             // 演示数据
                {
                    container: '.container',             // 容器class
                    title: '选择币种',                    // 标题
                    itemHeight: 44,                      // 每个元素的高度
                    itemShowCount: 3,                    // 每一列显示元素个数，超出将隐藏
                    oneLevelId: val,                     // 第一级默认值
                    callback: function (selectOneObj) {  // 用户确认选择后的回调函数
                        $(".bizhong_type").html(selectOneObj.value);
                        $(".bizhong_balance").html(selectOneObj.bizhong_balance);
                    }
                });


            });


             $(".phone_num_area_select_btn").click(function () {
               

               var data_02 = [{ 'id': 1, 'value': 'CN','show_all':'CN+86' }, { 'id': 2, 'value': 'BN','show_all':'BN+87'  }, { 'id': 3, 'value': 'FN' ,'show_all':'FN+99' }];
       
                   var val = 2;//打开时的默认值
                   // 实例化组件
                   var example_02 = new IosSelect(1,               // 第一个参数为级联层级，演示为1
                       [data_02],                             // 演示数据
                       {
                           container: '.container_02',             // 容器class
                           title: '选择区域',                    // 标题
                           itemHeight: 44,                      // 每个元素的高度
                           itemShowCount: 2,                    // 每一列显示元素个数，超出将隐藏
                           oneLevelId: val,                     // 第一级默认值
                           callback: function (selectOneObj) {  // 用户确认选择后的回调函数
                               $(".phone_num_area").html(selectOneObj.show_all);
                           }
                       });
       
       
            });


            var mySwiper = new Swiper('.swiper-container', {
                on: {
                    slideChangeTransitionStart: function () {
                        var index = this.activeIndex;
                        console.log(index, "第几个1122 ");
                        $(".m-slider-header-each ").removeClass('active');
                        $(".m-slider-header-each[data-index=" + index + " ] ").addClass('active');
                    },
                    slideChangeTransitionEnd: function () {
                        var index = this.activeIndex;
                        // console.log(index, "第几个 ");
                        // $(".m-slider-header-each ").removeClass('active');
                        // $(".m-slider-header-each[data-index=" + index + " ] ").addClass('active');
                    },
                }
            });

            $(".m-slider-header-each ").click(function () {

                $(".m-slider-header-each ").removeClass('active');
                $(this).addClass('active');

                var index = parseInt($(this).data('index') || 0);

                mySwiper.slideTo(index, 400, false);//切换到第一个slide，速度为1秒
            });
            

             $(".quick_comfirm").click(function () {

                layer.open({
                    title: [
                        '提示',
                        'background-color: #6AA5F5; color:#fff;'
                    ],
                    anim: 'up',
                    content: '转帐成功!<br />请提示对方用该手机号登陆查看<br />',
                    btn: ['继续转帐','返回首页'],
                    yes: function (index) {
                        layer.close(index);
                    }
                });
                });
          





        });



    </script>
</body>

</html>